<template>
  <svg :class="className" :style="computedStyle" aria-hidden="true" v-bind="$attrs" @click="$emit('click', $event)">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 图标名称（对应 SVG 文件名）
  name: {
    type: String,
    required: true
  },
  // 图标前缀（需与 vite-plugin-svg-icons 的 symbolId 配置匹配）
  prefix: {
    type: String,
    default: 'icon'
  },
  // 自定义类名
  className: {
    type: String,
    default: ''
  },
  // 图标颜色（优先使用 CSS 控制）
  color: {
    type: String,
    default: 'currentColor'
  },
  // 图标尺寸
  size: {
    type: [Number, String],
    default: 16
  }
});

// 生成 symbolId（示例格式：icon-home）
const symbolId = computed(() => `#${props.prefix}-${props.name}`);

// 处理尺寸样式
const computedStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  fill: props.color
}));
</script>
<style scoped lang="scss">

/* 全局图标样式 */
.svg-icon {
  vertical-align: middle;
  overflow: hidden;
  outline: none;

  /* 默认过渡动画 */
  transition:
    fill 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

/* 禁用状态 */
.svg-icon.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 可点击样式 */
.svg-icon.clickable {
  cursor: pointer;

  &:hover {
    transform: scale(1.1);
  }
}
</style>